
import { useState, useEffect } from 'react'
//路由
import { useHistory } from 'react-router-dom'
import Nav from "../../component/Nav/index"
//css
import './index.scss'
import { CascadePicker } from 'antd-mobile/2x'
import { getHouse } from '../../api/house'
//级联数据
import options from '../../assets/json/data.json'
import { picker } from '../../utils/picker'
import PickerView from '../../component/PickerView'
//判断类型
// import type from '../../utils/type'
export const NewHouse = () => {
    //路由参数
    const { go, push } = useHistory()
    //页码--条数
    // const [pageIndex, setpageIndex] = useState(1)
    //列表数据
    const [data, setData] = useState([])
    //是否继续下拉到底
    // const [hasMore, setHasMore] = useState(true)
    // 级联选择开关
    const [visible, setVisible] = useState(false)
    //组件
    const [visible1, setVisible1] = useState(false)
    const [value, setValue] = useState('jiage')
    //筛选数据
    const [payload, setPayload] = useState({
        prov: '',//省
        city: '',//市
        district: '',//区
        fangxing: '',//房型
        jiage: '',//价格
        cx: '',//朝向
    })
    // async function loadMore() {
    //     const append = await getList()
    //     setData(val => [...val, ...append])
    //     setpageIndex(pageIndex => pageIndex + 1)
    //     setHasMore(append.length > 0)
    // }

    useEffect(() => {
        getList()
    }, [payload])

    //初始化请求数据
    const getList = async (payload1 = payload) => {
        let res = await getHouse({ payload: payload1 })
        setData(res.data)
    }

    const filters = async (val) => {
        let data = null
        if (Object.prototype.toString.call(val) === '[object Array]') {
            data = picker(options, val)
        } else {
            data = val
        }
        let arr = { ...payload, ...data }
        setPayload(arr)
        getList(arr)
    }


    //打开选择器弹框
    const open = (type) => {
        setVisible1(true)
        setValue(type)
    }

    return (
        <div className='new_house'>
            {/* 头部 */}
            <Nav >新房</Nav>
            {/* 搜索 */}
            <div className="search">
                <p>
                    <span>北京</span>
                    <i className='iconfont icon-xiangxia'></i>
                </p>
                <div>
                    <input type="text" placeholder='请在这里输入区域/商圈' />
                    <i className='iconfont icon-sousuo'></i>
                </div>
                <span>地图找房</span>
            </div>
            {/* 导航 */}
            <div className="house_menu">
                <div>
                    <i className='iconfont icon-shangpuchuzu'></i>
                    <span>商铺</span>
                </div>
                <div>
                    <i className='iconfont icon-a-gongsiloufangxieziloujianzhu'></i>
                    <span>写字楼</span>
                </div>
                <div>
                    <i className='iconfont icon-qiandai'></i>
                    <span>小区</span>
                </div>
            </div>
            {/* 筛选 */}
            <div className="house_filter">
                <div className="filter_item" onClick={() => setVisible(true)}>
                    <span>区域</span>
                    <i className='iconfont icon-xiangxia'></i>
                </div>
                <div className="filter_item" onClick={() => open('jiage')}>
                    <span>价格</span>
                    <i className='iconfont icon-xiangxia'></i>
                </div>
                <div className="filter_item" onClick={() => open('fangxing')}>
                    <span>户型</span>
                    <i className='iconfont icon-xiangxia'></i>
                </div>
                <div className="filter_item" onClick={() => open('cx')}>
                    <span>筛选</span>
                    <i className='iconfont icon-xiangxia'></i>
                </div>
                <i className='iconfont icon-shunxu'></i>
            </div>
            {/* 内容 */}
            <div className="house_content">
                {
                    data.length && data.map(item => {
                        return <div className="list-box" key={item.id} onClick={() => { push({ pathname: '/detail', state: { data: item } }) }}>
                            <img src={item.img} alt="" />
                            <div className='list-item'>
                                <h3>{item.name}</h3>
                                <p>{item.mianji}平{item.fangxing} 1厅/{item.xq}</p>
                                <div>
                                    <h3>{item.jiage}</h3>/m<sup>2</sup>
                                </div>
                                <span>小区</span>
                            </div>
                        </div>
                    })
                }
                {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
            </div>
            {/* 区域 */}
            <CascadePicker
                title='区域'
                options={options}
                visible={visible}
                onClose={() => {
                    setVisible(false)
                }}
                onConfirm={(val) => {
                    filters(val)
                }}
            />
            {/* 选择器 */}
            <PickerView visible={visible1} setVisible={setVisible1} value={value} filters={filters} >

            </PickerView>
        </div>
    )
}

export default NewHouse
